<template>
  <div
    class="element element--article"
    ref="childElements"
    v-for="item in props.lastRightData"
    :key="item.id"
  >
    <figure class="article__figure" ref="figure">
      <div
        @click="pushDetail(item)"
      >
        <a class="figure__image disableShadowBox">
          <img class="lazyautosizes lazyloaded" :src="item.imgUrl" />
        </a>
      </div>
    </figure>
    <div class="article__content" ref="article">
      <h3 class="article__headline">
        <div
        @click="pushDetail(item)"
        >
          <a class="link">
            {{ item.title }}
          </a>
        </div>
      </h3>
      <div class="article__details" v-if="item.createTime">
        <!-- <span class="article__timestamp">{{ item.createTime }}</span> -->
        <!-- <span class="article__author">{{ item.author }}</span> -->
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps(["lastRightData"]);
const emits = defineEmits(["childElementHeight"]);
const pushDetail = (item) => {
  router.push({
    name: "NewDetail",
    params: { uuid: item.uuid, author: item.author },
  });
};
</script>
<style scoped lang="scss"></style>
